<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .box {
            width: 100%;
            height: 500px;
            background-color: #999;
        } */

        .wrap {
            width: 297px;
            height: 300px;
            border: 1px solid gray;
            display: inline-block;
            margin-left: 50px;
            margin-top: 30px;

        }

        .wrap img {
            width: 246px;
            height: 200px;
        }

        span {
            float: right;
        }

        .co {
            position: relative;
            top: -22px;
            left: -195px;
            color: grey;

        }

        .ch {
            position: relative;
            top: -22px;
            left: -95px;
            color: grey;
        }

        .pri {
            font-weight: bold;
        }

        p {
            color: deeppink;
            border-bottom: 1px gray solid;
            font-weight: bold;
        }

        .guang {
            color: black;
            border: none;
        }

        table {
            margin: auto;

        }

        .wei {
            border: none;
        }

        .names {
            margin-top: 6px;
        }

        .god {
            width: 203px;
            float: right;
            position: relative;
            left: -213px;
            top: 9px;


        }

        .photo {
            float: left;
            position: relative;
            top: -91px;
        }

        .del {
            border: none;
        }
        .right{
            width: 600px;
        
            margin:auto;
        }

        table{
            /* border: 1px gray solid; */
        }
        .freig{
            width: 63px;
            height: 28px;
        
            border-radius: 20px;
            text-align: center;
            border: 2px greenyellow solid;
            color: greenyellow;
            margin-top: 20px;
      
        }
        .xin{
            color:gray;
            border: none;
            float: left;
            margin-top: -27px;
            margin-left:90px;
        }
    </style>
</head>

<body>
    <div class="box">

    </div>

    <p>特卖商品19:18</p>
    <p class="guang">配送至<strong>广州市</strong> |勾选商品"√"即可锁定库存20分钟,倒计时内不用担心商品被抢走~</p>
<div class="left" >
    <div class="right">
    <table style="width: 900px; height: 30px; line-height: 48px; border-collapse: collapse; color: gray;" >
        <thead>
            <tr style="margin-left: 20px;">
                <th>商品</th>
                <th>单价</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>

        </tbody>
      
    </table>
    <div class="freig">运费</div>
 <p class="xin">新人免邮</p>
</div>
</div>
    <script>
        let box = document.querySelector(".box")
        let tbody = document.querySelector("tbody")
        let goods = [
            {
                img: "https://cbu01.alicdn.com/img/ibank/O1CN01swFGcq1IJsVkxU69I_!!2212504180873-0-cib.jpg",
                price: "￥198",
                cost: "<del>￥689</del>",
                zhe: "2.9折",
                name: "【新中式改良汉服旗袍连衣裙】国风立领盘扣刺绣微透...",
            },
            {
               img:"https://cbu01.alicdn.com/img/ibank/O1CN01gjTLT42AlLgoovpdd_!!2208614458243-0-cib.jpg",
                price: "￥196.8",
                cost: "￥<del>896</del>",
                zhe: "2.2折",
                name: "ARTBRUT短款休闲夹克外套女薄春春美式复古运动服套装设计感小众",
            },
            {
                img: "https://cbu01.alicdn.com/img/ibank/O1CN01bd6kwa1QWiYEsXVQd_!!3173001984-0-cib.jpg",
                price: "￥189",
                cost: "￥<del>689</del>",
                zhe: "2.7折",
                name: "CHICYOU美式高中生黑色奶米白色宽松字母刺绣圆领短袖T恤上衣",

            },
            {
                img: "https://cbu01.alicdn.com/img/ibank/O1CN01ftinQR2AlLgFngtnI_!!2208614458243-0-cib.jpg",
                price: "￥314",
                cost: "￥<del>1089</del>",
                zhe: "2.9折",
                name: "姜姜姜酱Jiang jam 黑色背心裙女春季新款复古学院风撞色外套套装",
            },
            {
                img: "https://cbu01.alicdn.com/img/ibank/O1CN01zEDawz1LFhudGRSKM_!!2216640531270-0-cib.jpg",
                price: "￥250",
                cost: "￥<del>1076</del>",
                zhe: "2.3折",
                name: "",
            },
            {
                img: "https://img1.baidu.com/it/u=57148141,2199383698&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                price: "￥399",
                cost: "￥<del>1416</del>",
                zhe: "2.8折",
                name: "改良版绣花汉服搭配拼色半身裙2023夏季新中式",
            },
            {
                img: "https://cbu01.alicdn.com/img/ibank/O1CN01swFGcq1IJsVkxU69I_!!2212504180873-0-cib.jpg",
                img: "",
                price: "￥278",
                cost: "￥<del>969</del>",
                zhe: "2.9折",
                name: "【新中式改良汉服旗袍假两件】连衣裙女夏复古立领盘...",
            },
            {
                img: "https://cbu01.alicdn.com/img/ibank/O1CN01ftinQR2AlLgFngtnI_!!2208614458243-0-cib.jpg",
                img: "",
                price: "￥279",
                cost: "￥<del>1999</del>",
                zhe: "1.4折",
                name: "2023夏季汉服古风度假风减龄显气质青春少女感爆棚连衣...",
            },


        ]
        window.onload = function () {
            show()
            shop()
        }
        function show() {
            let text = "";
            goods.forEach((item, index) => {
                text += `
                <div class="wrap">
                    <img src="${item.img}" alt="">
                    <div class="pri">${item.price}</div>
                    <span class="co">${item.cost}</span>
                    <span class="ch">${item.zhe}</span>
                    <div class="names">${item.name}</div>
                    <button class="add" data-index=${index}>加入购物车</button>
                    </div>
                `
            })
            box.innerHTML = text;
        }
        let goodslist = [
            {
                img: "https://img10.360buyimg.com/imgzone/jfs/t1/129483/22/28972/402593/62cd7e0fEd90d254c/0d6f7f445efc1fd7.jpg",
                name: "【新中式改良汉服旗袍连衣裙女】宽松气质立领国风盘",
                price: "￥189",
                number: 1,
            },
            {
                img: "https://img1.baidu.com/it/u=183449977,2239748163&fm=253&fmt=auto&app=120&f=JPEG?w=332&h=332",
                name: "2023年新款夏中国风轻款复古汉服中式盘扣新中式",
                price: "￥219",
                number: 1,
            },
            {
                img: "https://img0.baidu.com/it/u=1658593434,1178547774&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666",
                name: "【中国风改良旗袍裙】夏装新款女士修身拼接无袖印花",
                price: "￥299",
                number: 1,
            }
        ]
        function shop() {
            let html = "";
            goodslist.forEach((item, index) => {
                html += ` <tr>
                
                    <img src="${item.img}" alt="" width="100px" height="100px" class="photo">
                        <td class="god">${item.name}</td>
                        <td>${item.price}</td>
                        <td><button class="jian" data-index = ${index}>-</button>${item.number}<button class="jia" data-index = ${index}>+</button></td>
                        <td><button class="del" data-index = ${index}>删除</button></td>
                          </tr> `
            })
            tbody.innerHTML = html;
        }
        
    
    </script>
</body>

</html>